

<template>
	<div class="wrap">
    <div class="tip01 tipBig" @click="onLottery"> <span>抽奖</span> <img src="../../static/img2/img111.png" alt=""></div>
    <div class="tip02"> <span>参与<i>{{sign}}</i>人</span> <img src="../../static/img2/img111.png" alt=""></div>
    <!-- <div class="logo-box-r">
      <div class="item01"><img src="../../static/img2/shansong_logo.png" alt=""></div>
    </div> -->
		<!-- 照片墙 -->
		<!-- <PhotoWall :list="list" :newPerson="newUser"></PhotoWall> -->
	</div>
</template>

<script>
import api from "@/api";
import * as m_types from "@/store/mutation-types";
import UserItem from "./UserItem";
// import PhotoWall from "./PhotoWall";
import PhotoWall from "./LogoWall";

export default {
  data() {
    return {
      list: [],
      listMap: {},
      // 注册人数
      total: 0,
      // 签到人数
      sign: 0,
      // 新加入的用户
      newUser: null,
    };
  },
  mounted() {
    this.getUserList();
    this.$root.$on("userJoin", this.userJoin);

    this.mock_newUser();
  },
  beforeDestroy() {
    this.$root.$off("userJoin", this.userJoin);
    clearTimeout(this.timerId);
  },
  methods: {
    getUserList() {
      api
        .getUserList({})
        .then(data => {
          // console.log(JSON.stringify(data));
          console.log(data);
          if (data.code) {
            this.$message(data.message);
            return;
          }
          data = data.data;
          this.$store.commit(m_types.SET_DATA, data);

          // this.list = JSON.parse(JSON.stringify(data.list));
          this.list = data.list;
          this.total = data.total;
          this.sign = data.sign;
          this.list.forEach(o => {
            this.listMap[o.user_id] = o;
          });
        })
        .catch(res => {
          console.log(res);
          setTimeout(this.getUserList, 10000);
        });
    },
    userJoin(d) {
      // TODO: 从 socket 接收到用户进入，此时应该实现动画效果
      this.newUser = d;
      if (!this.listMap[d.user_id]) {
        this.listMap[d.user_id] = d;
        // this.list.push(d);
        if (this.$store.state.app.data) {
          this.$store.commit(m_types.INSERT_PERSON, d);
        }

        this.sign++;
        this.total++;
      }
      setTimeout(() => {
        if (this.newUser === d) {
          this.newUser = null;
        }
      }, 3000);
    },
    onLottery() {
      this.$router.push({ path: "/lottery" });
    },
    mock_newUser() {
      // TODO: 正式版应该屏蔽掉 (模拟 socket 用户签到)
      return;
      if (this.list.length) {
        let o = Object.assign({}, this.list[(this.list.length * Math.random()) >> 0]);
        o.user_id = Math.random();
        this.userJoin(o);
      }
      this.timerId = setTimeout(this.mock_newUser, 5000);
    }
  },
  components: {
    UserItem,
    PhotoWall
  }
};
</script>
<style scoped>
@import "../../static/css/index.css";
@import "../../static/css/lottery.css";
.erweima{
  position: absolute;
  width: 12%;
  top: 50%;
  transform: translate(0,-50%)
}

.e01{
  left: 4%;
}
.e02{
  right: 4%;
}
.tip01{
  bottom: 7%;
}
</style>
